<template>
  <div id="App" class="App">
    <van-tabbar v-model="active" v-show="$route.meta.navBarShow" class="tabbar">
      <van-tabbar-item
        v-for="item in routeList"
        :key="item.id"
        :icon="item.icon"
        :to="item.toLink"
        >{{ item.title }}</van-tabbar-item
      >
    </van-tabbar>
    <transition name="switchPage">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import Vue from "vue";
import Vant, { Lazyload } from "vant";
import "vant/lib/index.css";
Vue.use(Vant); // Vue.component(全局注册组件) aka 全局初始化
// 懒加载
Vue.use(Lazyload, {
  lazyComponent: true,
  loading:
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01197b5a3b8225a80121db80826655.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653641268&t=ea4c7a6b71557f3e676762e1cf01509d",
});

export default {
  data() {
    return {
      active: 0,
      routeList: [
        { id: 1, icon: "wap-home", toLink: "/home", title: "主页" },
        { id: 2, icon: "more", toLink: "/category", title: "分类" },
        { id: 3, icon: "shopping-cart", toLink: "/cart", title: "购物车" },
        { id: 4, icon: "manager-o", toLink: "/center", title: "个人中心" },
      ],
    };
  },
  updated() {
    if (window.location.pathname == ("/home" || "/")) {
      return (this.active = 0);
    } else if (window.location.pathname == "/category") {
      return (this.active = 1);
    } else if (window.location.pathname == "/cart") {
      return (this.active = 2);
    } else if (window.location.pathname == "/center") {
      return (this.active = 3);
    }
  },
};
</script>
<style lang="scss">

.tabbar {
  z-index: 999;
}
.switchPage-enter-active {
  animation: bounce-in 0.5s;
}
.switchPage-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
